<template>
  <div id=''>
    <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="list.pagesize"
          layout="prev, pager, next, sizes, jumper"
          :total="counts"
        >
        </el-pagination>
      </div>
  </div>
</template>

<script>
export default {
  name: 'QuestionsPagination',
  data () {
    return {
      list: {
        page: 1,
        pagesize: 5
      }
    }
  },
  props: {
    counts: {
      type: Number,
      required: true
    }
  },
  // 定义方法
  methods: {
    handleSizeChange (val) {
      this.list.pagesize = val
    },
    handleCurrentChange (val) {
      this.list.page = val
    }
  },
  watch: {
    list: {
      deep: true,
      handler () {
        this.$emit('pagination', this.list)
      }
    }
  }
}
</script>

<style scoped lang='less'>
 .block {
    text-align: right;
    margin-top: 20px;
  }
</style>
